<template>
  <el-dialog :modal-append-to-body='true' fullscreen :visible.sync="visible" title="详情" :close-on-click-modal="true" :close-on-press-escape="true">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first" >
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
                 :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
          <el-row>
            <el-col :span="4">
              <el-form-item label="猪舍" prop="name">
                <el-select v-model="dataForm.houseId" placeholder="请选择">
                  <el-option
                      v-for="item in houses"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="耳号" prop="earmark">
                <el-input v-model="dataForm.earmark" placeholder="耳号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="性别" prop="name">
                <RenSelect dictType="gender" placeholder=""
                           v-model="dataForm.gender"></RenSelect>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="栏位" prop="grid">
                <el-input v-model="dataForm.grid" placeholder="栏位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="进场类型" prop="name">
                <RenSelect dictType="source" placeholder=""
                           v-model="dataForm.sources"></RenSelect>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="进场日期" prop="inDate">
                <el-input v-model="dataForm.inDate" placeholder="进场日期"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-show="dataForm.gender!=0" :span="4">
              <el-form-item label="入场胎次" prop="name">
                <el-input v-model="dataForm.parity" placeholder="入场胎次"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="出生日期" prop="birthDate">
                <el-input v-model="dataForm.birthDate" placeholder="出生日期"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="品种" prop="name">
                <RenSelect dictType="breed" placeholder=""
                           v-model="dataForm.breed"></RenSelect>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="品系" prop="name">
                <RenSelect dictType="strain" placeholder=""
                           v-model="dataForm.strain"></RenSelect>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="血统" prop="pedigree">
                <el-input v-model="dataForm.pedigree" placeholder="血统"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="生产状态" prop="state">
                <RenSelect v-show="dataForm.gender==0" dictType="boar_status" placeholder=""
                           v-model="dataForm.state"></RenSelect>
                <RenSelect v-show="dataForm.gender==1" dictType="pig_status" placeholder=""
                           v-model="dataForm.state"></RenSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="来源" prop="sources">
                <RenSelect dictType="source" placeholder=""
                           v-model="dataForm.sources"></RenSelect>
              </el-form-item>
            </el-col>
            <el-col v-show="dataForm.gender!=0" :span="4">
              <el-form-item label="状态天数" prop="stateDays">
                <el-input v-model="dataForm.stateDays" placeholder="状态天数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="备注" prop="name">
                <el-input v-model="dataForm.name" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="float: right;">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="生产信息" name="second">
        <el-row>
          <el-col :span="24">
            <el-button v-if="operationVisible" @click="duannai()" type="default" style="float: right;margin-left: 10px;">断奶</el-button>
            <el-button v-if="operationVisible" @click="fenmian()" type="warning" style="float: right;">分娩</el-button>
            <el-button v-if="operationVisible" @click="renjian()" type="success" style="float: right;">妊检</el-button>
            <el-button v-if="operationVisible" @click="peizhong()" type="primary" style="float: right;">配种</el-button>
            <el-button v-if="!operationVisible" @click="caijing()" type="primary" style="float: right;">采精</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="productTable"
            style="width: 100%;margin-top: 10px;">
          <el-table-column
              prop="parity"
              label="胎次"
              width="180">
          </el-table-column>
          <el-table-column
              prop="typeName"
              label="事件"
              width="180">
          </el-table-column>
          <el-table-column
              prop="parity"
              label="胎次"
              width="180">
          </el-table-column>
          <!-- <el-table-column
              prop="stateDays"
              label="状态天数"
              width="180">
          </el-table-column> -->
          <el-table-column
              prop="operateDate"
              label="操作日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="contentObj"
              label="详情">
            <template slot-scope="scope">
              <div v-if="scope.row.typeName === '分娩'"  style="width: 100%;">
                  <div style="width: 50%;float: left;">分娩类型: {{scope.row.contentObj.分娩类型}}</div>
                <div style="width: 50%;float: left;">健仔头数: {{scope.row.contentObj.健仔头数}}</div>
                <div style="width: 50%;float: left;">弱仔头数: {{scope.row.contentObj.弱仔头数}}</div>
                <div style="width: 50%;float: left;">木乃伊头数: {{scope.row.contentObj.木乃伊头数}}</div>
                <div style="width: 50%;float: left;">死胎头数: {{scope.row.contentObj.死胎头数}}</div>
                <div style="width: 50%;float: left;">畸形头数: {{scope.row.contentObj.畸形头数}}</div>
                <div style="width: 50%;float: left;">操作人: {{scope.row.contentObj.操作人}}</div>
              </div>
              <div v-if="scope.row.typeName === '配种'"  style="width: 100%;">
                <div style="width: 50%;float: left;">配种方式: {{scope.row.contentObj.配种方式}}</div>
                <div style="width: 50%;float: left;">公猪耳号: {{scope.row.contentObj.公猪耳号}}</div>
                <div style="width: 50%;float: left;">操作人: {{scope.row.contentObj.操作人}}</div>
              </div>
              <div v-if="scope.row.typeName === '断奶'"  style="width: 100%;">
                <div style="width: 50%;float: left;">断奶窝重: {{scope.row.contentObj.断奶窝重}}</div>
                <div style="width: 50%;float: left;">断奶头数: {{scope.row.contentObj.断奶头数}}</div>
                <div style="width: 50%;float: left;">操作人: {{scope.row.contentObj.操作人}}</div>
              </div>
              <div v-if="scope.row.typeName === '妊检'"  style="width: 100%;">
                <div style="width: 50%;float: left;">妊检结果: {{scope.row.contentObj.妊检结果}}</div>
                <div style="width: 50%;float: left;">操作人: {{scope.row.contentObj.操作人}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <breed-mate v-if="mateVisible" ref="refBreedMate" @refreshData="refreshData"></breed-mate>
    <preg-check v-if="checkVisible" ref="refPregCheck" @refreshData="refreshData"></preg-check>
    <breed-birth v-if="birthVisible" ref="refBirth" @refreshData="refreshData"></breed-birth>
    <breed-wean v-if="weanVisible" ref="refWean" @refreshData="refreshData"></breed-wean>
    <breed-semen v-if="semenVisible" ref="refSemen" @refreshData="refreshData"></breed-semen>
  </el-dialog>
</template>

<script>/* eslint-disable */
import debounce from 'lodash/debounce'
import BreedMate from '../production/breed-mate'
import PregCheck from '../production/preg-check'
import BreedBirth from '../production/breed-birth'
import BreedWean from '../production/breed-wean'
import BreedSemen from '../production/breed-semen'

export default {
  props: ['fields', 'model', 'rule'],
  data() {
    return {
      mateVisible: false,
      checkVisible: false,
      birthVisible: false,
      weanVisible: false,
      semenVisible: false,
      operationVisible: true,
      houses: [],
      activeName: 'first',
      visible: false,
      loaded: false,
      dataForm: {
        test: ''
      },
      pickerOptions: {},
      productTable: []
    }
  },
  computed: {
    dataRule() {
      return {
        houseId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        earmark: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        gender: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        grid: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        sources: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        state: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        birthDate: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        dayAge: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        age: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        birthWeight: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        siblings: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        breed: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        strain: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        // pedigree: [
        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        // ],
        father: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        fatherIndex: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mother: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        motherIndex: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        breedIndex: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        inbreed: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        outStatus: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        outType: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        remark: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    BreedMate,PregCheck,BreedBirth,BreedWean,BreedSemen
  },
  mounted() {
  },
  methods: {
    init() {
      this.visible = true
      this.activeName = 'first'
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getHouses()
          this.getInfo()
        }
      })
    },
    getHouses () {
      this.$http.get(`/basic/house/all`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.houses = res.data;
      }).catch(() => {})
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if ('first' == tab.name){
        this.getInfo();
      }else{
        this.getProductInfo();
      }
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/stock/${this.model}/${this.dataForm.id}`).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        if (this.dataForm.gender == 0){
          this.operationVisible = false
        }else{
          this.operationVisible = true
        }
      }).catch(() => {
      })
    },
    queryPigAsync(queryString, cb) {
      this.$http.get(
          '/stock/pig/page', {params: {}}
      ).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let pigs = res.data.list
        cb(pigs)
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    queryhouseAsync(queryString, cb) {
      this.$http.get(
          '/basic/house/page', {params: {}}
      ).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let houses = res.data.list
        cb(houses)
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    handlePigSelect(item, field) {
      console.log(item, field)

      this.dataForm[field] = item.id
    },
    handleHouseSelect(item, field) {
      this.dataForm[field] = item.id
    },
    peizhong() {
      this.mateVisible = true;
      this.$nextTick(() => {
        this.$refs.refBreedMate.dataForm.id = this.dataForm.id
        this.$refs.refBreedMate.init()
      })
    },
    renjian() {
      this.checkVisible = true;
      this.$nextTick(() => {
        this.$refs.refPregCheck.dataForm.id = this.dataForm.id
        this.$refs.refPregCheck.init()
      })
    },
    fenmian() {
      this.birthVisible = true;
      this.$nextTick(() => {
        this.$refs.refBirth.dataForm.id = this.dataForm.id
        this.$refs.refBirth.init()
      })
    },
    duannai() {
      this.weanVisible = true;
      this.$nextTick(() => {
        this.$refs.refWean.dataForm.id = this.dataForm.id
        this.$refs.refWean.init()
      })
    },
    caijing() {
      this.semenVisible = true;
      this.$nextTick(() => {
        this.$refs.refSemen.dataForm.id = this.dataForm.id
        this.$refs.refSemen.init()
      })
    },
    // 生产信息
    getProductInfo() {
      this.$http.get(`/stock/pig/history?pigId=`+ this.dataForm.id).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        var pt = []
        for(var i=0;i<res.data.length;i++){
          res.data[i].contentObj = JSON.parse(res.data[i].content)
          pt.push(res.data[i])
        }
        console.log(pt)
        this.productTable = pt;
      }).catch(() => {
      })
    },
    refreshData() {
      this.getProductInfo();
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put'](`/stock/${this.model}/`, this.dataForm).then(({data: res}) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {
        })
      })
    }, 1000, {'leading': true, 'trailing': false})
  }
}
</script>
<style>
.el-dialog__body{
  padding: 15px 15px 0 15px !important;
}
</style>
